<template>
  <view class="message-detail-page">
    <scroll-view class="content-scroll" scroll-y>
      <view class="message-container">
        <view class="message-header">
          <view :class="['header-icon', messageType]">
            <u-icon :name="getIcon()" size="32" color="#ffffff" />
          </view>
          <text class="message-title">{{ message.title }}</text>
          <text class="message-time">{{ message.time }}</text>
        </view>
        
        <view class="message-content">
          <rich-text :nodes="message.content"></rich-text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const messageId = ref(0)
const messageType = ref('system')

const message = ref({
  title: '系统通知',
  time: '2024-10-20 14:30',
  content: `
    <p style="line-height: 1.8; color: #6b7280; margin-bottom: 16px;">
      尊敬的用户，您好！
    </p>
    <p style="line-height: 1.8; color: #6b7280; margin-bottom: 16px;">
      欢迎使用壹加壹农业服务平台！我们致力于为您提供全方位的农业服务支持。
    </p>
    <p style="line-height: 1.8; color: #6b7280; margin-bottom: 16px;">
      平台主要功能：
    </p>
    <ul style="padding-left: 40rpx; margin-bottom: 16px;">
      <li style="line-height: 1.8; color: #6b7280; margin-bottom: 8px;">服务市场：浏览和发布农业服务</li>
      <li style="line-height: 1.8; color: #6b7280; margin-bottom: 8px;">需求大厅：发布和查看农业需求</li>
      <li style="line-height: 1.8; color: #6b7280; margin-bottom: 8px;">服务中心：了解各类农业服务详情</li>
      <li style="line-height: 1.8; color: #6b7280; margin-bottom: 8px;">个人中心：管理您的服务和需求</li>
    </ul>
    <p style="line-height: 1.8; color: #6b7280;">
      如有任何问题，欢迎随时联系客服。祝您使用愉快！
    </p>
  `
})

onLoad((options) => {
  if (options.id) {
    messageId.value = options.id
  }
  if (options.type) {
    messageType.value = options.type
  }
  loadMessage()
})

const getIcon = () => {
  const iconMap = {
    system: 'bell',
    service: 'bag',
    demand: 'list'
  }
  return iconMap[messageType.value] || 'bell'
}

const loadMessage = () => {
  // TODO: 调用API加载消息详情
}
</script>

<style scoped lang="scss">
.message-detail-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

.content-scroll {
  height: 100vh;
}

.message-container {
  background-color: #ffffff;
  min-height: 100vh;
}

.message-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64rpx 32rpx 48rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.header-icon {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  
  &.system {
    background: linear-gradient(135deg, #10b981, #059669);
  }
  
  &.service {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
  }
  
  &.demand {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }
}

.message-title {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 16rpx;
}

.message-time {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.message-content {
  padding: 32rpx;
  font-size: 28rpx;
  line-height: 1.8;
  color: var(--text-secondary);
}
</style>

